<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-17 16:40:52
-->
<template>
    <div class="middlebox">
        <div class="title-h">
            <div>
                <img src="@/assets/img/dashboard/装饰_.png" alt="">
                水库风险等级预警
            </div>
            <img src="@/assets/img/dashboard/边角.png" alt="">
        </div>
        <div class="dengji-box">
            <div class="charts" id="charts" ref="circle"></div>
        </div>
    </div>
</template>

<script>
import { triggerRef } from 'vue'
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            charts:null
        }
    },
    watch: {
        data: {
            handler(val) {
                this.init()
            },
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    unmounted() {
        this.charts.dispose()
    },
    methods: {
       init() {
            const that = this
            let myCharts = null
            myCharts = that.$echarts.init(that.$refs.circle)
            that.charts = myCharts
            // that.renderData(this.data)
            myCharts.off('click')
            myCharts.on('click','series.liquidFill' , params => {
                that.$emit('onRiskeve', params.data.type)
            })
            myCharts.setOption(that.setOption())
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        setOption() {
            const that =this
            let option = {
                legend: {
                    data: [
                        {
                        name: '低风险水库',
                        },
                        {
                        name: '中风险水库',
                        },
                        {
                        name: '高风险水库',
                        }
                    ],
                    textStyle:{
                        color:'#fff'
                    },
                    orient:'vertical',
                    type: "plain",
                    top: 'middle',
                    left:'75%',
                    icon:'pin',
                },
                series:[
                    {
                        type: 'liquidFill',
                        name: '低风险水库',
                        data: [{
                            value: that.data.lower / that.data.sum,
                            custom : that.data.lower,
                            type:1
                        }],
                        color: ['#006E1F'],
                        radius: '55%',
                        center: ['58%', '35%'],
                        backgroundStyle: {
                            color: '#023500',
                            borderColor: '#023500',
                            borderWidth: 5,
                        },
                        label: {
                            normal: {
                                formatter: function(params) {
                                    return params.data.custom
                                },
                                color:'#fff',
                                textStyle: {
                                    fontSize: 18
                                }
                            }
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#006E1F',
                                borderWidth: 5
                            },
                            borderDistance: 0
                        }
                    },
                    {
                        type: 'liquidFill',
                        name: '中风险水库',
                        data: [{
                            value: that.data.middles / that.data.sum,
                            custom : that.data.middles,
                            type:2
                        }],
                        color: ['#004D83'],
                        radius: '45%',
                        center: ['20%', '42%'],
                        backgroundStyle: {
                            color: '#002038',
                            borderColor: '#002038',
                            borderWidth: 5,
                        },
                        label: {
                            formatter: function(params) {
                                return params.data.custom
                            },
                            color:'#fff',
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#003F6F',
                                borderWidth: 5
                            },
                            borderDistance: 0
                        }
                    },
                    {
                        type: 'liquidFill',
                        name: '高风险水库',
                        data: [{
                            value: that.data.hight / that.data.sum,
                            custom : that.data.hight,
                            type:3
                        }],
                        color: ['#8C150C'],
                        radius: '35%',
                        center: ['38%', '75%'],
                        backgroundStyle: {
                            color: '#3D0F08',
                            borderColor: '#3D0F08',
                            borderWidth: 5,
                        },
                        label: {
                            formatter: function(params) {
                                return params.data.custom
                            },
                            color:'#fff',
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#931100',
                                borderWidth: 5
                            },
                            borderDistance: 0
                        }
                    },
                ]
            }
            return option
        }
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .dengji-box {
        position: relative;
        width: 100%;
        background-color: rgba(0, 50, 76, 0.85);
        margin-top: 10px;
        box-sizing: border-box;
        height: calc(100% - 60px);
        .charts {
            height: 100%;
            // border: 1px solid white;
        }
    }
}
</style>